<template>
  <Header msg="头部分"  @refreshParent="refreshParent" class="fixed-header"></Header>
  <div ref="targetDiv" class="ycnz ">
    <div class="zjneiron dark_word  gaodu">
      <div class="container">
        <!-- 功能卡片容器 -->
        <div class="container_div" v-for="(card, index) in cards" :key="index">
          <el-card shadow="hover" class="container_div_card" @click="handleCardClick(card.argument)"
            :style="{ backgroundColor: card.backgroundColor }">
            <el-row :gutter="20">
              <el-col :span="4" style="height: 110px;">
                <img :src="card.image" width="50" height="50" />
              </el-col>
              <el-col :span="20">
                <div class="font_size25 font-color-white margin_top5">{{ card.title }}</div>
                <div class="font_size13 font-color-white margin_top5">{{ card.subtitle }}</div>
                <div class="font-color-white">{{ card.usage }}</div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </div>
    </div>
  </div>

  <Footer msg="脚部分"></Footer>
</template>


<script>
import { ref, computed, onMounted } from 'vue';
import { Moon, Sunny, Headset, Download, VideoCameraFilled, Document, Upload, VideoPlay } from '@element-plus/icons-vue';
import Footer from '../components/footer.vue';
import Header from '../components/header.vue';
import { useRouter } from 'vue-router';
import "../components/css/Homepage.css";

export default {
  components: {
    Footer,
    Header,
  },
  setup() {
    const isDarkMode = ref(false);
    const targetDiv = ref(null);
    const textarea = ref('');
    const router = useRouter(); // 导入路由对象

    /// 获取cookie
    function getCookie(name) {
      const nameEQ = name + "=";
      const ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.startsWith(nameEQ)) return c.substring(nameEQ.length);
      }
      return null;
    };

    // 功能卡片数据
    const cards = [
      { id: 1, argument:'qushuiyin', image: 'src/images/Tbox/qushuiyin.png', title: '去水印', subtitle: '全平台短视频，一键去水印', usage: '免费使用', backgroundColor: 'cornflowerblue' },
      { id: 2, argument:'wenantiqu', image: 'src/images/Tbox/wenantiqu.png', title: '文案提取', subtitle: '一键提取短视频旁白', usage: '免费使用', backgroundColor: 'burlywood' },
      { id: 3, argument:'zidongduizhou', image: 'src/images/Tbox/zidongduizhou.png', title: '自动对轴', subtitle: '输入源音视频加文案，一键生成字幕文件', usage: '免费使用', backgroundColor: 'blueviolet' },
      

    ];
     // { id: 6, argument:'bianyin', image: 'src/images/Tbox/bianyin.png', title: '音效变声', subtitle: '一键修改声音效果', usage: '免费使用', backgroundColor: 'coral' },
     // { id: 7, argument:'renshengfenli', image: 'src/images/Tbox/renshengfenli.png', title: '人声分离', subtitle: 'AI精准分离人声与背景音', usage: 'SVIP免费使用', backgroundColor: 'hotpink' },
    // 处理卡片点击事件
    const handleCardClick = (value) => {
     
      router.push({ name: 'Tinkerboxview', params: { argument: value } });
      // 这里可以放置更多的逻辑，比如导航到其他页面等
    }

    function refreshParent() {

const user = getCookie('nightMode');
if (user == "") {
  targetDiv.value.className = "light";
} else {

  targetDiv.value.className = user;
}

};
    // 初始化时设置默认主题
    onMounted(() => {
      const user = getCookie('nightMode');
      if (user == "") {
        targetDiv.value.className = "light";
      } else {
        targetDiv.value.className = user;
      }
    });

    return {
      isDarkMode,
      Headset,
      Document,
      Download,
      VideoCameraFilled,
      Moon,
      Sunny,
      targetDiv,
      textarea,
      VideoPlay,
      handleCardClick,
      cards,
      refreshParent
    };
  },
};
</script>

<style scoped>
.container {
  width: 80%;
  /* 容器宽度 */
  margin-left: 10%;
  /* 左边距 */
  display: flex;
  /* 弹性布局 */
  flex-wrap: wrap;
  /* 允许项目在必要时换行 */
  gap: 10px;
  /* 项目之间的间距 */
  padding: 10px;
  /* 内边距 */
  
}

.container_div {
  width: 460px;
  /* 卡片容器宽度 */
  height: 250px;
  /* 卡片容器高度 */
}

.container_div_card {
  width: 430px;
  /* 卡片宽度 */
  height: 150px;
  /* 卡片高度 */
  margin-top: 50px;
  /* 上外边距 */
  margin-left: 30px;
  /* 左外边距 */
  border-radius: 10px;
  /* 圆角 */
  border-color: transparent;
  /* 边框颜色透明 */
  color: white;
  /* 文字颜色 */
  cursor: pointer;
  /* 鼠标指针样式 */
  transition: transform 0.3s, box-shadow 0.3s;
  /* 平滑过渡效果 */
}

.container_div_card:hover {
  transform: translateY(-10px);
  /* 鼠标悬停时向上移动 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  /* 添加阴影 */
}

.font_size25 {
  font-size: 25px;
  /* 字体大小 */
}

.font_size13 {
  font-size: 13px;
  /* 字体大小 */
}

.font-color-white {
  color: white;
  /* 文字颜色 */
}

.margin_top5 {
  margin-top: 5px;
  /* 上边距 */
}
.gaodu{
  min-height: 868px;
}

</style>